<template>
  <el-row>
    <el-col :span="4">
      <el-scrollbar height="80vh">

      <shop-table @current-change="handleShopTableCurrentChange"/>
      </el-scrollbar>
    </el-col>
    <el-col :span="20">
      <div v-if="currentShopId !== undefined">
        <div class="button">
          <el-button v-if="isHr" type="primary" @click="handleAddClick">添加人员</el-button>
        </div>
        <div class="table">
          <el-table v-loading="isLoading" :data="shopUsers" border>
            <el-table-column label="用户名" prop="username"/>
            <el-table-column label="手机" prop="mobile"/>
            <el-table-column v-if="isHr" label="操作" width="140">
              <template #default="{row}">
                <el-popconfirm
                    title="是否确定删除？"
                    @confirm="handleDeleteConfirm(currentShopId, row.userid)"
                >
                  <template #reference>
                    <el-button link type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-empty v-else description="请选择门店"/>
    </el-col>
  </el-row>
  <add-shop-user-dialog
      v-if="currentShopId !== undefined && currentShopName !== undefined"
      v-model="isAddDialogShow"
      :shop-id="currentShopId"
      :shop-name="currentShopName"
      @success="handleDialogSuccess"
  />
</template>
<script lang="ts" setup>
import {ref, watch} from "vue";
import {ElMessage} from "element-plus"
import {ShopUserResponse} from "@/api/types/shopUser";
import {deleteShopUserFromShop, getShopUsersByShopId} from "@/api/shopUser";
import AddShopUserDialog from "@/components/dialog/AddShopUserDialog.vue";
import ShopTable from "@/components/table/ShopTable.vue";
import {useUserStore} from "@/stores/user";
import {storeToRefs} from "pinia";

const userStore = useUserStore()
const {isHr} = storeToRefs(userStore)

const currentShopId = ref<number>()
const currentShopName = ref<string>()
const shopUsers = ref<ShopUserResponse[]>([])
const isLoading = ref(false)
const isAddDialogShow = ref(false)

async function getData() {
  if (currentShopId.value !== undefined) {
    if (isLoading.value == false) {
      isLoading.value = true
    }
    const {data} = await getShopUsersByShopId(currentShopId.value)
    if (data?.user_list !== undefined) {
      shopUsers.value = data.user_list
      isLoading.value = false
    }
  }
}

watch(currentShopId, async () => {
  await getData()
})

function handleAddClick() {
  isAddDialogShow.value = true
}

async function handleDeleteConfirm(shopId: number, shopUserId: string) {
  try {
    const {code} = await deleteShopUserFromShop(shopId, shopUserId)
    if (code == "200") {
      ElMessage.success('删除成功');
      await getData()
    } else {
      ElMessage.error('删除失败');
    }
  } catch (error) {
    ElMessage.error('删除失败');
  }
}

async function handleDialogSuccess() {
  await getData()
}

function handleShopTableCurrentChange(shopId: number, shopName: string, isArea?: number) {
  if (isArea == 0) {
    currentShopId.value = shopId
    currentShopName.value = shopName
  } else {
    currentShopId.value = undefined
    currentShopName.value = undefined
  }
}
</script>
<style lang="scss" scoped>
.button, .table {
  margin-left: 20px;
}

.button {
  margin-bottom: 10px;
}
</style>
